<template>
    <el-card shadow="never" class="weather-widget-card" v-loading="loading">
      <div v-if="weatherData" class="weather-content">
        <div class="header">
          <div class="location-info">
            <el-icon><LocationInformation /></el-icon>
            <span>{{ weatherData.city }}</span>
          </div>
          <div class="date">{{ new Date().toLocaleDateString('zh-CN', { month: 'long', day: 'numeric' }) }}</div>
        </div>
        <div class="weather-body">
            <el-icon v-if="weatherIcon" :size="90" class="weather-icon">
                <component :is="weatherIcon" />
            </el-icon>
            <div class="temp-info">
                <span class="temperature">{{ Math.round(weatherData.temperature) }}°</span>
                <span class="desc">{{ weatherData.weather }}</span>
            </div>
        </div>
        <div class="weather-footer">
            <div class="footer-item">
                <span>风向</span>
                <strong>{{ weatherData.windDirection }}风</strong>
            </div>
            <div class="footer-item">
                <span>湿度</span>
                <strong>{{ weatherData.humidity }}%</strong>
            </div>
            <div class="footer-item">
                <span>风速</span>
                <strong>{{ weatherData.windPower }}级</strong>
            </div>
        </div>
      </div>
      <el-alert v-if="error" :title="error" type="error" show-icon :closable="false" />
    </el-card>
  </template>
  
  <script setup>
  import { ref, onMounted, computed } from 'vue';
  import weatherService from '../services/weatherService';
  import { LocationInformation, Sunny, Cloudy, Pouring, QuestionFilled } from '@element-plus/icons-vue';
  
  const loading = ref(true);
  const weatherData = ref(null);
  const error = ref('');
  
  const weatherIcon = computed(() => {
      if (!weatherData.value) return null;
      const weatherText = weatherData.value.weather;
      if (weatherText.includes('晴')) return Sunny;
      if (weatherText.includes('云') || weatherText.includes('阴')) return Cloudy;
      if (weatherText.includes('雨')) return Pouring;
      return Sunny; // 默认给一个晴天图标
  });
  
  // 重写onMounted生命周期函数
  onMounted(async () => {
    loading.value = true;
    error.value = '';
    weatherData.value = null;
    try {
      // 调用全新的服务
      const data = await weatherService.getCurrentWeather();
      weatherData.value = data;
    } catch (err) {
      // 将服务中返回的错误信息展示出来
      error.value = err.message || '加载天气时发生未知错误';
    } finally {
      loading.value = false;
    }
  });
  </script>
  
  <style scoped>
  /* 样式保持不变 */
  .weather-widget-card {
    height: 100%;
  }
  .weather-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
  }
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--vt-c-text-light-2);
  }
  .location-info {
    font-weight: 500;
    display: flex;
    align-items: center;
  }
  .location-info .el-icon {
    margin-right: 5px;
  }
  .date {
    font-size: 0.9em;
  }
  .weather-body {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
  }
  .weather-icon {
    color: var(--el-color-primary);
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
  }
  .temp-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
  }
  .temperature {
    font-size: 4rem;
    font-weight: 700;
    color: var(--vt-c-text-light-1);
  }
  .desc {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--vt-c-text-light-2);
    text-transform: capitalize;
    margin-left: 4px;
  }
  .weather-footer {
    display: flex;
    justify-content: space-around;
    background-color: var(--vt-c-white-mute);
    border-radius: 8px;
    padding: 12px;
  }
  .footer-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.9rem;
    color: var(--vt-c-text-light-2);
  }
  .footer-item strong {
    font-weight: 600;
    font-size: 1rem;
    color: var(--vt-c-text-light-1);
    margin-top: 4px;
  }
  </style>